<template>
  <div>
    <div class="layer1"></div>
    <div class="layer2"></div>
    <div class="layer3"></div>

    <el-card class="box-card">
      <div class="cardHeard">
        <eyesHead></eyesHead>
      </div>
      <el-form ref="ruleFormRef" model="ruleForm" :rules="rules">
        <el-form-item prop="name">
          <!-- // 用户名输入框 -->
          <el-input v-model="ruleForm.name" :prefix-icon="User" />
        </el-form-item>

        <el-form-item prop="password">
          <!-- // 密码输入框 -->
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" show-password :prefix-icon="Lock" />
        </el-form-item>
        <el-checkbox v-model="rememberPassword" label="记住密码" size="large" />
        <br>
        <el-form-item>
          <el-button class="btnWidth" type="primary" color="#626aef" @click="submitForm(ruleFormRef)">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 轮播图 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div v-for="item in 12" :key="item" class="swiper-slide imgDivClass" :id="`carouselMap_${item - 1}`"
          loading="lazy">
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import Swiper from 'swiper';
import 'swiper/swiper.min.css';
import eyesHead from './eyesHead.vue'
const components = {
  eyesHead,
};

//枚举,限制属性
interface RuleForm {
  name: string
  password: string
}
const ruleFormRef = ref<FormInstance>()

const rememberPassword = ref(true)
const ruleForm = reactive<RuleForm>({
  name: '11',
  password: '22',
})
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 1, max: 4, message: '长度在1到10个字符之间', trigger: 'blur' },
  ],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' },
  { min: 1, max: 4, message: '长度在10到20个字符之间', trigger: 'blur' }],
})



const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!', ruleForm)
    } else {
      console.log('error submit!', ruleForm)
    }
  })
}

// 背景轮播图
onMounted(() => {
  const swiper = new Swiper('.swiper', {
    updateOnWindowResize: true, // 窗口大小发生变化更新视图
    allowTouchMove: false, //禁止鼠标滑动
    direction: 'vertical', //垂直滚动
    loop: true, // 循环
  });

  // 轮播图每次打开都随机图片
  let i = 0
  let numArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
  let randomIndex1 = Math.round(Math.random() * numArr.length - 1);
  const imgDiv: any = document.querySelector(`#carouselMap_${i}`)
  imgDiv!.style.backgroundImage = `url(/CarouselMap/wallhaven-${numArr[randomIndex1]}.webp)`
  numArr.splice(randomIndex1, 1)
  const timer = setInterval(() => {
    i++
    if (i <= 11 && numArr.length > 0) {
      let randomIndex = Math.round(Math.random() * (numArr.length - 1))
      const imgDiv: any = document.querySelector(`#carouselMap_${i}`)
      imgDiv!.style.backgroundImage = `url(/CarouselMap/wallhaven-${numArr[randomIndex]}.webp)`
      numArr.splice(randomIndex, 1)
    } else {
      clearInterval(timer)
    }
  }, 2000)

  // 每隔俩秒,切换下一张
  setInterval(() => {
    swiper.slideNext(3000)
  }, 10000)



})





// @ts-ignore
</script>
<style lang="scss" scoped>
.head {
  display: flex;
  position: relative;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: pink;
  border-radius: 50%;

  span {
    position: absolute;
    top: 40%;
    display: inline-block;
    width: 30px;
    height: 8px;
    background-color: #000;
  }

  .leftEye {
    left: 16%;
    border-radius: 30% 30% 60% 90%;

  }

  .rightEye {
    right: 16%;
    border-radius: 30% 30% 90% 60%;

  }
}

.cardHeard {
  height: 120px;
}

.box-card {
  position: fixed;
  top: 25%;
  right: 10%;
  width: 320px;
  height: 350px;
  opacity: 1;
  z-index: 99;
}

.btnWidth {
  width: 100%;
}

::v-deep .el-card__body {
  padding: 20px 40px 40px 40px;
}

.swiper {
  width: 100%;
  height: 100vh;
}

.imgDivClass {
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@function getShadows($n) {
  //scss内置语法,声明方法
  $shadows: '#{random(100)}vw #{random(100)}vh #fff';

  @for $i from 2 through $n {
    $shadows: '#{$shadows}, #{random(100)}vw #{random(100)}vh #fff'
  }

  @return unquote($shadows)
}

$duration :400s;
$count: 1000;

@for $i from 1 through 3 {

  //scss内置语法,for循环.  循环值:1,2,3,4
  .layer#{$i} {
    //#{} 插值语法   字符串拼接
    $size: #{$i}px; //$声明变量
    $duration: floor($duration /2); //scss内置的向下取整的方法
    $count: floor($count/2);
    z-index: 9;
    position: fixed;
    width: $size;
    height: $size;
    opacity: 0.5;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: getShadows($count);
    animation: moveUp $duration linear infinite;

    &::after {
      content: '';
      position: fixed;
      top: -100vh; // vh视口高度 vw视口宽度
      left: 0;
      width: $size;
      height: $size;
      box-shadow: inherit; // scss语法,继承上一个元素
      border-radius: inherit;
    }
  }
}

@keyframes moveUp {
  100% {
    transform: translateY(100vh)
  }
}
</style>
